<template>
    <el-dialog title="管理会话记录" v-model="dialogVisible" width="1000px">
        <el-table ref="table" :data="sessionList" height="500px" @selection-change="handleSelectionChange">
            <el-table-column label="#" type="selection" width="45" align="center"></el-table-column>
            <el-table-column label="会话标题" prop="title" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" prop="createdAt" width="180" :formatter="formatDate"></el-table-column>
            <el-table-column label="最后更新" prop="updatedAt" width="180" :formatter="formatDate"></el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template #default="scope">
                    <el-button type="text" size="small" @click="() => deleteSession(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div style="text-align: center; margin-top: 10px;">
            <el-button @click="dialogVisible = false">关闭</el-button>
            <el-button type="danger" @click="deleteSelectedSessions"
                :disabled="selectedList.length == 0">删除选中</el-button>
        </div>
    </el-dialog>
</template>

<script>

export default {

    model: {
        prop: 'visible',
        event: 'update:visible'
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        applicationId: {
            type: [String, Number],
            required: true
        }
    },
    watch: {
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal);
        },
        visible(newVal) {
            this.dialogVisible = newVal;
            if (newVal) {
                this.fetchSessionList();
            }
        }
    },
    mounted() {
        this.dialogVisible = this.visible;
        this.fetchSessionList();
    },
    data() {
        return {
            dialogVisible: false,
            sessionList: [],
            selectedList: []
        };
    },
    methods: {
        fetchSessionList() {
            this.$api.ai.getChatSessionList(this.applicationId).then(response => {
                this.sessionList = response.data;
            });
        },
        formatDate(row, column, cellValue) {
            if (!cellValue) return '';

            let date = new Date(cellValue);
            if (isNaN(date.getTime())) return '';

            // 返回时间字符串，格式为 YYYY-MM-DD HH:mm
            return date.toLocaleString().substring(0, 17);
        },
        deleteSession(sessionId) {
            this.$confirm('确定删除该会话吗？', '警告', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.ai.deleteChatSession(sessionId).then(() => {
                    this.$message.success('删除成功');
                    this.fetchSessionList();
                });
            });
        },
        handleSelectionChange(selectedList) {
            this.selectedList = selectedList;
            console.log('Selected sessions:', selectedList);
        },
        deleteSelectedSessions() {
            const selectedIds = this.selectedList.map(item => item.id);
            if (selectedIds.length === 0) {
                this.$message.warning('请先选择要删除的会话');
                return;
            }
            this.$confirm('确定删除选中的会话吗？', '警告', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(selectedIds)
                this.$api.ai.deleteChatSessions(selectedIds).then(() => {
                    this.$message.success('删除成功');
                    this.fetchSessionList();
                });
            });
        }
    }
};

</script>